<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="big-box">
					<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
					<div class="title-box">
						<span class="title-line"></span>
						<div class="title">
							<span class="jiu-font30-fff">修改昵称</span>
						</div>
					</div>
					
					<div class="input-box">
						<div class="input-item" style="padding: 6.4vw;width: 100%;"> 
							<span class="jiu-font28-aaa">昵称</span>
							<input type="text" placeholder="请输入新的昵称" v-model="name" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 300;width: 100%;" :maxlength="maxLength" @input="checkInput" />
						</div>
					</div>
				</div>
			</ma-refresh>
			<bottom-box slot="footer">
				<span class="submit-btn" @tap="onConfirm">确认修改</span>
			</bottom-box>
		</ma-body>
		<u-modal v-model="cancelModal" :content="content" @confirm="resetConfirm" :show-cancel-button="true"></u-modal>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				cancelModal: false,
				content: '是否确认修改此昵称？',
				name: '',
				maxLength: 30
			}
		},
		methods: {
			onConfirm(){
				if(this.name.length == 0) return uni.showToast({
					icon: 'none',
					title: '请输入新昵称'
				})
				this.cancelModal = true;
			},
			async resetConfirm(){
				let data = {
					nickname: this.name
				};
				this.$u.api.onEditInfo(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1000)
				});
				this.$store.dispatch('user/loginSuccess');
			},
			checkInput(e){
				if(this.$u.test.chinese(e.detail.value) == true){
					this.maxLength = 16;
				}else if (this.$u.test.enOrNum(e.detail.value) == true){
					this.maxLength = 32;
				}
			}
		},
		onLoad(){
			this.name = this.user.myInfo.user.nickname;
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 3.73vw;
		font-weight: 300;
		.jiu-font28-555{
			font-weight: 300;
		}
	}
	.tips-box{
		display: flex;
		align-items: flex-start;
		.tip-text{
			font-size: 3.2vw;
			font-weight: 300;
			color: #FF9E3E;
		}
	}
	.top267{
		margin-top: 4.27vw;
	}
	.big-box{
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
			.title{
				display: flex;
				flex-direction: column;
			}
		}
		
		
		.input-box{
			margin-top: 12.8vw;
			padding-left: 5.33vw;
			.input-item{
				display: flex;
				align-items: center;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 500;
				color: #aaaaaa;
				.jiu-font28-aaa{
					width: 15vw;
					margin-right: 4.27vw;
				}
				.send-btn{
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.4800);
					margin-left: 4.27vw;
				}
			}
		}
	}
	.submit-btn{
		width: 100%;
		line-height: 12.8vw;
		border-radius: 6.4vw;
		background-color: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
		text-align: center;
		color: #000000;
		font-size: 3.73vw;
		font-weight: 500;
	}
</style>